<template>
  <el-dialog
    title="店铺详情"
    :visible.sync="visible"
    v-loading='loading'
    center
    top = 6vh
    width="1000px">
  
    <div class="mid">
      <el-form :model="dataForm"
                :rules="dataRule"
                ref="dataForm"
                @keyup.enter.native="dataFormSubmit()"
                status-icon
                label-position="right"
                label-width= '80px'
                size="small"
                :inline-message='true'
                :hide-required-asterisk='true'>
        <el-form-item prop="shopOwner" label="店主姓名:" label-width="125px">
          <el-input class="info"
                    v-model="dataForm.shopOwner"
                    placeholder="店主名"></el-input>
        </el-form-item>
        <el-form-item prop="shopName" label="店铺名:" label-width="125px">
          <el-input class="info"
                    v-model="dataForm.shopName"
                    placeholder="店铺名"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="mobile" label="手机号:" label-width="125px">
          <el-input class="info"
                    v-model="dataForm.mobile"
                    placeholder="手机号">
            <span slot="append" style="border:0;color:#1F87E8;background-color:rgba(0,0,0,0);width:100%;height:100%;" v-if="!isPending" @click="getCheckCode">获取验证码</span>
            <span slot="append" style="border:0;color:#606266;background-color:rgba(0,0,0,0);width:100%;height:100%;" v-if="isPending">重新发送（{{remainingTime}}）</span>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkCode" label="验证码:" label-width="125px">
          <el-input class="info"
                    v-model="dataForm.checkCode"
                    @change="checkMobile" 
                    placeholder="验证码">
          </el-input>
        </el-form-item> -->
        <el-form-item prop="address" label="地址" label-width="125px">
          <v-distpicker @selected="addrSelect" @province='province' @city='city' @area='area' :province="dataForm.province" :city="dataForm.city" :area="dataForm.area" :placeholders="placeholders"></v-distpicker>
        </el-form-item>
        <!-- <el-form-item prop="showAddress" label="地址:" label-width="125px">
          <el-input class="info"
                    v-model="dataForm.showAddress"
                    placeholder="请使用抓取地址进行抓取"
                    :disabled="true">
            <template slot="append"><span @click="catchAddress" style="color:#1F87E8">抓取地址</span></template>                      
          </el-input>
          {{dataForm.shopAddress}}
        </el-form-item> -->
        <!-- {{dataForm.shopAddress}} -->
        <el-form-item prop="shopAddress" label="详细地址:" label-width="125px">
          <el-input v-model="dataForm.shopAddress" style="margin-top:4px" class="info" placeholder='请将详细地址补充完整，无需再次填写省市区'></el-input>
        </el-form-item>
        <el-form-item prop="idCard" label="身份证正反面:" label-width="125px" :hide-required-asterisk='true'>
          <div style="display:flex;">
            <idUpload v-model="dataForm.id1" url ="/admin/file/upload/elementOpen" imgUrl ="http://images.51xeld.com/2020/08/7a74b29bade84869bf26b91ea34a651b.png"></idUpload>
            <idUpload v-model="dataForm.id2" url ="/admin/file/upload/elementOpen" imgUrl ="http://images.51xeld.com/2020/08/ce3515b97500475b8f26fa4ec0fef5b0.png"></idUpload>

          </div>
          <!-- {{dataForm.id1}}
          {{dataForm.id2}} -->
        </el-form-item>
        <!-- <el-form-item label="身份证正反面" label-width="120px" >
          <idUpload v-model="dataForm.id1" url ="/admin/file/upload/elementOpen" imgUrl ="http://images.51xeld.com/2020/08/7a74b29bade84869bf26b91ea34a651b.png"></idUpload>
        </el-form-item> -->
        <el-form-item label="营业执照:" label-width="125px" prop="bussinessLicense">
          <LisenceUpload   v-model="dataForm.bussinessLicense" url ="/admin/file/upload/elementOpen"></LisenceUpload  >
          <!-- {{dataForm.bussinessLicense}} -->
        </el-form-item>
        <el-form-item label="卫生许可证:" label-width="125px" prop="hygienicLicense">
          <LisenceUpload   v-model="dataForm.hygienicLicense" url ="/admin/file/upload/elementOpen"></LisenceUpload >
          <span style="font-size:12px;color:#B1B1B1;">卫生许可证/食品药品生产许可证  请选择任意一个证件上传</span>
        </el-form-item>
        <!-- <el-form-item label="食品经营许可证:" label-width="125px" prop="foodBusinessLicense">
          <LisenceUpload   v-model="dataForm.foodBusinessLicense" url ="/admin/file/upload/elementOpen"></LisenceUpload >
          {{dataForm.foodBusinessLicense}}
        </el-form-item> -->
      </el-form>
      <div class="footer">
          <el-button type="info" @click.stop="visible = !visible">取消</el-button>
          <el-button type="primary" @click.stop="dataFormSubmit()">确认修改</el-button>
      </div>

    </div>  

  <!-- <div slot="footer" v-if="ifShowChangeBtn">
      <el-button type="danger" :loading="btnLoading" @click.stop="changeShopState('not')">不予通过</el-button>
      <el-button type="primary" :loading="btnLoading" @click.stop="changeShopState('pass')">通过审核</el-button>
  </div> -->

  <!-- 绑定供应商弹窗 -->
  <el-dialog
      title=""
      :visible.sync="chooseAgentVisible"
      :close-on-click-modal="false"
      top="8vh"
      width="70%"
      append-to-body>
      <div style="height:70vh;overflow:auto">
      <avue-crud ref="crud"
              :data="agentList"
              :option="agentOption">
          <template slot-scope="scop" slot="menu">
              <el-button size="medium"   type="normal" @click.stop="chooseAgent(scop.row)">确定</el-button>
          </template>                
      </avue-crud>            
      </div>
      <div style="height:20px" slot="footer">
      </div>
    </el-dialog>


  </el-dialog>
</template>

<script>
import { agentOption } from '@/crud/shop/agent'
import VDistpicker from 'v-distpicker'
import idUpload from '@/components/id-registe'
import LisenceUpload from '@/components/lisence-registe'


export default {
  data () {

    var validateAddress = (rule, value, callback) => {
      console.log('running');
      console.log(this.dataForm);
      if (!this.dataForm.province || this.dataForm.province == '省') {
        callback(new Error('请选择省份'))
      }else if (!this.dataForm.city || this.dataForm.city == '市') {
        callback(new Error('请选择市'))
      }else if (!this.dataForm.area || this.dataForm.area == '区') {
        callback(new Error('请选择区域'))
      }else{
        callback()
      }

    };
    var validateIdCard = (rule,value,callback) =>{
      if (!this.dataForm.id1 || !this.dataForm.id2) {
        callback(new Error("请上传身份证正反面两面"))
      } else {
        callback()
      }
    }
    var validateBussinessLicense = (rule,value,callback) =>{
      if (!this.dataForm.bussinessLicense) {
        callback(new Error("请上传营业执照"))
      } else{
        callback()
      }
    }
    var validatehygienicLicense = (rule,value,callback) =>{
      if (!this.dataForm.hygienicLicense) {
        callback(new Error("请上传卫生许可证"))
      } else{
        callback()
      }
    }
    return {
      aggrementVisible: false,
      visible: false,
      mobileIslegal: false,
      codeIsLegal: false,
      checkCodeIsRunning :false,
      loading: false,
      chooseAgentVisible: false,
      agentOption: agentOption,
      agentList: [],
      dataForm: {
        userName: '',
        password: '',
        confirmPassword:'',
        shopOwner: '',
        shopName: '',
        mobile: '',
        bussinessLicense: '',
        hygienicLicense: '',
        foodBusinessLicense: '',
        province: '湖北省',
        city: '襄阳市',
        area: '樊城区',
        shopAddress: '',
        checked: true,
      },
      placeholders: {},
      remainingTime: 60,
      isPending: false,
      coordinate:{},
      addressArray:{},
      dataRule: {
        shopName: [
          { required: true, message: '店铺名不能为空', trigger: 'blur' }
        ],
        shopOwner: [
          { required: true, message: '请输入店主名', trigger: 'blur' }
        ],
        address: [
          { validator: validateAddress, trigger:'blur' }
        ],
        idCard: [
          { validator: validateIdCard, trigger:'blur'}
        ],
        shopAddress: [
          { required: true, message: '请填写详细地址，精确到门牌号', trigger: 'blur' },
        ],
        bussinessLicense: [
          { required: true, message: '请上传营业执照',trigger: 'blur' },
          { validator: validateBussinessLicense, trigger:'blur' },
        ],
        hygienicLicense: [
          { required: true, message: '请上传卫生许可证或食品药品生产许可证',trigger: 'blur' },
          { validator: validatehygienicLicense, trigger:'blur' },
        ],
      },
    }
  },

  computed:{
    address(){
      return this.province + this.city + this.area
    },
    idCard(){
      return this.dataForm.id1+','+this.dataForm.id2
    },
  },

  components:{
    // myMap,
    VDistpicker,
    idUpload,
    LisenceUpload ,
    // aggrement
  },

  methods:{
    init(shop){
      this.visible = true
      this.agent = ''
      this.dataForm = shop
      this.dataForm.id1 = this.dataForm.idCard.split(',')[0]
      this.dataForm.id2 = this.dataForm.idCard.split(',')[1]
    },

    addrSelect(data){
      this.dataForm.province = data.province.value
      this.dataForm.city = data.city.value
      this.dataForm.area = data.area.value
      console.log(data);
      this.$refs.dataForm.validateField('address');
    },

    province(data){
      this.$refs.dataForm.validateField('address');
    },
    city(data){
      this.$refs.dataForm.validateField('address');
    },
    area(data){
      this.$refs.dataForm.validateField('address');
    },

    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/shop/shopDetail'),
            method: 'put',
            params:this.$http.adornParams({
              shopId: this.dataForm.shopId,
              shopOwner: this.dataForm.shopOwner,
              shopName: this.dataForm.shopName,
              province: this.dataForm.province,
              city: this.dataForm.city,
              area: this.dataForm.area,
              shopAddress: this.dataForm.shopAddress,
              idCard: this.dataForm.id1+','+this.dataForm.id2,
              bussinessLicense: this.dataForm.bussinessLicense,
              hygienicLicense: this.dataForm.hygienicLicense,
              state: 1,
            })
          }).then(({data}) => {
            if (data == 'success') {
              this.$message({
                message: '修改成功',
                type: 'success'
              });      
              this.visible = false
              this.$emit("refresh")
            }else{
              this.$message.error('');      
            }
          }).catch(() => {
          })
        }else{
          this.$message.error('信息填写不完整或填写错误，请检查您填写的信息')
        }
      })
    },    

    openAgentList(){
      this.chooseAgentVisible = true
      this.$http({
        url: this.$http.adornUrl('/shop/shopDetail/AgentInfo'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) =>{
        this.agentList = data
      })     
    },

    getAgentInfo(){
      this.$http({
        url: this.$http.adornUrl('/shop/shopDetail/AgentInfo?agentId='+this.shop.agentId),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) =>{
        console.log(data);
        // this.agentList = data
      })     
    },

        //选择区域负责人
    chooseAgent(agent){
      this.agent = agent
      this.agent.address = [agent.province,agent.city].join(',')
      this.chooseAgentVisible = false
    },

    changeShopState(isPass){
      console.log("running");      
      if (isPass == 'pass' &&  !this.agent) {
        this.$message.error('请先选择供应商');
        return 
      }
      this.btnLoading = true
      this.$http({
        url: this.$http.adornUrl("/shop/shopDetail/shopState"),
        // url: this.$http.adornUrl("/shop/shopDetail/shopState?shopId="+id+"&state="+(isPass==='pass'?0:2)),
        method: 'put',
        params: this.$http.adornParams({
          shopId: this.shop.shopId,
          state: isPass == 'pass'?0: 2,
          agentId: this.agent?this.agent.agentId: null
        })
      }).then(({data}) => {
        this.loading = false
        // console.log(data);
        this.btnLoading = false
        this.visible = false
        this.$emit("refresh")
        // this.getDataList()  

        this.$message({
          type:isPass == 'pass'?'success':'error',
          message:isPass == 'pass'?'该店铺通过审核！':'已驳回申请'
        })                          
      })          
    }

  }
}
</script>

<style scoped>

.mid{
  width: 100%;
  padding: 0 100px;
  height: 76vh;
  overflow-x: hidden;
  overflow-y: scroll;
}




.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.title{
  width: 110px;
  display: inline-block;
  text-align: end;
  margin-right: 10px;
}
.title::before{
  content: '* ';
  color: #F56C6C;
  font-size: 12px;
}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  width: 680px;
}
.distpicker-address-wrapper select{
  width: 134px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  color: #606266;
}
.el-checkbox{
  margin-right: 0;
}
label.el-form-item__label::before {
  content: '*';
  color: #F56C71;
  margin-right: 3px;
}
.footer{
  margin-left: 550px;
}

</style>